<template>
	<view>
		<view id="mapContainer" :style="{height: height + 'px',width: '100%'}" :prop="sender"
			:change:prop="handleAction"></view>
	</view>
</template>
<script module="leaflet" lang="renderjs">
	import L from 'leaflet'
	import icon from 'leaflet/dist/images/marker-icon.png';
	import iconShadow from 'leaflet/dist/images/marker-shadow.png';

	export default {
		data() {
			return {
				map: null,
				ownerInstance: {},
				layers: [],
				baseLayers: [],
				sender: {
					handle: '',
					latlng: {},
					options: null,
					callback: '',
					param: null
				},
				height: 1000,

				//实时监测区域图层
				polygonLayer:{},


				//轨迹图
				makerMoving: [],

				guiji:[],


				//轨迹图demo入参
				demoReq:{
					result:[
						{
						dvrid:"XFX502",
						line:[
							[34.45185944,108.77682246],
							[34.45242884,108.77544766],
							[34.45302166,108.7762764],
							[34.45440452,108.77744192],
						]
						},
						{
						dvrid:"XFX502",
						line:[
							[34.45385944,108.77682246],
							[34.45342884,108.77444766],
							[34.45302166,108.7742764],
							[34.45340452,108.77444192],
						]
						}
					]
				},

				//孔位图

				Holes:[],


				//车辆图

				car:{}
			}
		},
		props:{
			mapUrl:{
				type:String,
				default:''
			},
			holeDetail: {
				type: Function,
				default: null,
			},
		},
		mounted() {
			this.handleCreate()
		},
		methods: {
			handleAction(newValue, oldValue, ownerInstance, instance) {
				this.ownerInstance = ownerInstance
				var handle = this[newValue.handle]
				var latlng = newValue.latlng
				var options = newValue.options
				var callback = newValue.callback
				var param = newValue.param
				if (!options) {
					options = undefined
				}
				if (!handle) {
					console.info('参数为标记需要执行的方法')
					return
				}
				//同时执行两次操作的时必须延迟执行否则数据变化太快导致没反应
				this.handleExecute(handle, latlng, options, callback, param)
			},
			handleExecute(handle, latlng, options, callback, param) {
				var layer = handle(latlng, options)
				if (!layer) {
					return
				}
				if (options && options.popup) {
					layer.bindPopup(options.popup)
				}
				if (!callback) {
					return
				}
				layer.on('click', () => {
					this.ownerInstance.callMethod('handleItemClick', { callback, param })
				})
			},



			handleCreate(options) {
				this.map = L.map('mapContainer', {
				    center:[34.44347876485817,108.7622747059566],
                    zoom: 15,
                    maxZoom:35,
				});
				L.supermap.tiledMapLayer(this.mapUrl).addTo(this.map)

				let DefaultIcon = L.icon({
						iconUrl: 'static/che2.png',
						shadowUrl: iconShadow
					});
				L.Marker.prototype.options.icon = DefaultIcon;
			},





			handleCreateLayerControl() {
				var obj = {}
				for (var i = 0; i < this.baseLayers.length; i++) {
					var item = this.baseLayers[i]
					obj[item.label] = item.layer
				}
				var control = L.control.layers(obj)
				control.addTo(this.map)
			},
			marker(latlng, options) {
				var myIcon = L.icon({
					iconUrl: '../static/0.png',
					iconSize: [30, 30],
					iconAnchor: [22, 94],
					// popupAnchor: [‐3, ‐76],
					// shadowUrl: '@/static/logo.png',
					// shadowSize: [68, 95],
					// shadowAnchor: [22, 94]
				});
				// var options = {
				// 	icon: myIcon
				// }


				var marker = L.marker(latlng, {icon: myIcon})
				marker.addTo(this.map)
				// if (options && options.popup) {
				// 	marker.bindPopup(options.popup)
				// }
				// this.layers.push(marker)
				return marker
			},
			polyline(latlngs, options) {
				var polyline = L.polyline(latlngs, options)
				polyline.addTo(this.map)
				if (options && options.popup) {
					polyline.bindPopup(options.popup)
				}
				this.layers.push(polyline)
				return polyline
			},
			lsyerWMS(baseUrl, options) {
				var layer = L.tileLayer.wms(baseUrl, options)
				layer.addTo(this.map)
				this.layers.push(layer)
				return layer
			},
			circle(latlng, options) {
				var circle = L.circle(latlng, options)
				circle.addTo(this.map)
				if (options && options.popup) {
					circle.bindPopup(options.popup)
				}
				this.layers.push(circle)
				return circle
			},
			geoJson(geojson, options) {
				var json = geojson
				if (typeof(geojson) == 'string') {
					json = Terraformer.parse(geojson)
				}
				var layer = L.geoJSON(json, options)
				layer.addTo(this.map)
				if (options && options.popup) {
					layer.bindPopup(options.popup)
				}
				this.layers.push(layer)
				return layer
			},
			panTo(latlng, options) {
				this.map.panTo(latlng, options)
			},
			flyTo(latlng, options) {
				this.map.flyTo(latlng, options)
			},
			fitBounds(bounds, options) {
				this.map.fitBounds(bounds, options)
			},
			flyBounds(bounds, options) {
				this.map.flyToBounds(bounds, options)
			},
			setZoom(zoom, options) {
				this.map.setZoom(zoom, options)
			},
			removeAll() {
				for (var i = 0; i < this.layers.length; i++) {
					var item = this.layers[i]
					item.remove()
				}
				this.layers = new Array()
			},
			handleMarker(latlng, options, callback, param) {
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				this.sender = {
					handle: 'marker',
					latlng: latlng,
					options: options,
					callback,
					param
				}
			},
			handleItemClick(event) {
				// #ifdef H5
				var handle = this.$parent.$parent[event.callback]
				//#endif
				// #ifdef APP-PLUS
				var handle = this.$parent[event.callback]
				//#endif
				if (handle) {
					handle(event.param)
				}
				// console.log(event)
			},
			handlePolyline(latlngs, options, callback, param) {
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				this.sender.handle = 'polyline'
				this.sender.latlng = latlngs
				this.sender.options = options
				this.sender.callback = callback
				this.sender.param = param
			},
			handleLsyerWMS(baseUrl, options, callback, param) {
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				this.sender.handle = 'lsyerWMS'
				this.sender.latlng = baseUrl
				this.sender.options = options
				this.sender.callback = callback
				this.sender.param = param
			},
			handleCircle(latlng, options, callback, param) {
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				this.sender.handle = 'circle'
				this.sender.latlng = latlng
				this.sender.options = options
				this.sender.callback = callback
				this.sender.param = param
			},
			handleGeoJson(geojson, options, callback, param) {
				this.sender.handle = 'geoJson'
				this.sender.latlng = geojson
				this.sender.options = options
				this.sender.callback = callback
				this.sender.param = param
			},
			handlePanTo(latlng, options) {
				this.sender.handle = 'panTo'
				this.sender.latlng = latlng
				this.sender.options = options
			},
			handleFlyTo(latlng, options) {
				this.sender = {
					handle: 'flyTo',
					latlng: latlng,
					options: options
				}
			},
			handleFitBounds(bounds, options) {
				this.sender.handle = 'fitBounds'
				this.sender.latlng = bounds
				this.sender.options = options
			},
			handleFlyBounds(bounds, options) {
				this.sender.handle = 'flyBounds'
				this.sender.latlng = bounds
				this.sender.options = options
			},
			handleSetZoom(zoom, options) {
				this.sender.handle = 'setZoom'
				this.sender.latlng = zoom
				this.sender.options = options
			},
			handleRemoveAll() {
				this.sender.handle = 'removeAll'
				this.sender.latlng = null
				this.sender.options = null
			},



			//新增逻辑


			//压实 实时监控 工程区域
			yashiMarkPosition(latlng,polygon){
				this.clearPolylineGroup(this.polygonLayer)
				this.polygonLayer = L.polygon(polygon).addTo(this.map);

				//中心点背底部弹窗挡住了，偏移一点坐标
				latlng.lat = latlng.lat -0.005

				this.map.setView(latlng,15)
			},

			//清除施工区域
			clearMarkPosition(){
				this.clearPolylineGroup(this.polygonLayer)
			},

			// 清除图层
			clearPolylineGroup (polyline_group){
				this.map.removeLayer(polyline_group);
				this.map.setView([34.44347876485817,108.7622747059566],15)
			},

			// 清除一组图层
			clearPolylineGroups (polyline_groups){
				polyline_groups.map((m)=>{
					this.map.removeLayer(m);
				})

				this.map.setView([34.44347876485817,108.7622747059566],15)
			},

			//测试movingMaker函数
			test(){
				var test = [

				[34.441646, 108.768597],

				[34.440548, 108.767374],

				[34.439363, 108.76746],

				[34.439522, 108.770099],

				[34.441097, 108.770163]

				]
				  var marker1 = L.Marker.movingMarker(test, [10000,10000],{autostart: true}).addTo(this.map);
 				  L.polyline(test).addTo(this.map);
			},


			createMovingMarker(e){

				//先清除之前的轨迹图层

				//删除选中的车
				this.clearPolylineGroup(this.car)


				//删除先
				this.clearPolylineGroups(this.guiji)


				//Todo bug 上次选择的轨迹怎么删除


				// if (this.makerMoving.length >0){
				// 	this.makerMoving.map((m)=>{
				// 		m.onRemove()
				// 	})
				// }


				this.makerMoving = []

				var tmp1
				var tmp2
				var tmp



				console.log("撒打算打算的  e是什么",e)


				//由于后台的数据不太正确 有些时间点还没有，先mock数据
				 e.map((m)=>{
					tmp1 = m.line[0][0]-0.01;
					tmp2 = m.line[0][1];
					tmp = []
					tmp.push(tmp1,tmp2)
					var polyline =L.polyline(m.line, {color: 'red'}).addTo(this.map);
					this.guiji.push(polyline)
					var time = []
					for(var i =0; i<m.line.length;i++){
						time[i]=5000
					}
					var marker1 = L.Marker.movingMarker(m.line, time,{autostart: true}).addTo(this.map);
					this.makerMoving.push(marker1)
					marker1.bindPopup('<b>车辆ID:'+m.dvrid+'</b>', {closeOnClick: false});
				})
				this.map.setView(tmp,15)
			},

			//夯实孔位
			createHole(e){

				//先清除之前的孔位图
				console.log("之前是啥",this.Holes)
				this.clearPolylineGroups(this.Holes)
				this.Holes = []

				var tmp1
				var tmp2
				var tmp


				for(let i= 0;i<e.length;i++){
					var color = ''

					switch (i) {
						case 0:
							color = 'red'
							break;
						case 1:
							color = 'green'
							break;
						case 2:
							color = 'orange'
							break;
						case 3:
							color = 'pink'
							break;
						case 4:
							color = 'yellow'
							break;
						case 5:
							color = 'blue'
							break;
						default:
							color = 'grey'
							break;
					}
					tmp1 = e[0].latitude-0.01
					tmp2 = e[0].longitude;
					tmp = []
					tmp.push(tmp1,tmp2)

					var circle = L.circle([e[i].latitude, e[i].longitude], {
						color: color,
						fillColor: '#f03',
						radius: 20
					}).addTo(this.map);



					circle.on(`click`, () => {
            			 this.handleHoleClick(e[i]);
         			});

					this.Holes.push(circle)

				}
				this.map.setView(tmp,15)
			},

			removeHole(){
				this.clearPolylineGroups(this.Holes)
			},

			//点击孔位查看详情
			handleHoleClick(e){

				this.holeDetail(e);
			},

			//画车辆
			createCar(e){
				console.log(e)
				//先清除之前的轨迹图层
				this.clearPolylineGroup(this.car)
				var tmp1
				var tmp2
				var tmp


				tmp1 = e.latitude-0.01;
				tmp2 = e.longitude;
				tmp = []
				tmp.push(tmp1,tmp2)


				var myIcon = L.icon({
					iconUrl: 'static/che2.png',
				});

				this.car = L.marker([e.latitude,e.longitude], {icon: myIcon}).addTo(this.map);

				this.map.setView(tmp,15)
			},

			//清除车辆
			removeCar(){
				this.clearPolylineGroup(this.car)
			},
		}
	}
</script>


<style lang="scss">
#mapContainer{
	background-color: #000;
}
</style>
